<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #box {
      width: 800px;
      height: 800px;
      margin: 0 auto;
    }

    #canvasWaord {
      float: left;
    }

    #divRight {
      width: 400px;
      height: 400px;
      float: right;
      background-color: aqua;
    }
  </style>
</head>

<body>
  <p>
    ·beginPath() ：表示要开始绘制新路径。<br />
    ·moveTo()：起点坐标(x,y)。<br />
    ·lineTo()：从起点坐标到开始绘制一条线，到(x,y)。<br />
    ·rect(x,y,width,height)：从点(x,y)开始绘制一个矩形，宽度和高度分别由width和height指定。<br />
    这个方法绘制的是矩形路径，而不是strokeRect()和fillRect()所绘制的独立的形状。<br />
    ·arc(x,y,r,start,end,flase||true)：以(x,y)为圆心绘制一条弧线，弧线半径为r，起始结束角度<br />
    (用弧线表示)分别为start和end。最后一个参数true和flase是否按逆时针方向计算，(值为true表示按逆时针计算)
  </p>
  <div id="box">
    <canvas id="canvasWaord" width="400px" height="400px"></canvas>
    <div id="divRight">
      <p id="elemtpTo"></p>
    </div>
  </div>

</body>
<script>
  //一个矩形
  //填充
  // ctx.fill()//默认黑色
  // ctx.fillStyle = 'black'
  // //描边
  // ctx.stroke()//默认黑色
  // ctx.strokeStyle = 'black'
  // ctx.fillRect(10, 10, 50, 50)
  //开始绘制新路径
  // drawElent.beginPath();
  // //把画笔移动到指定坐标
  // drawElent.moveTo(50, 50)
  // //绘制一条从当前位置到指定位置（200，50）的直线
  // 绘制
  // drawElent.stroke()
  var elemtPs = document.getElementById('elemtpTo')
  window.onload = function () {
    // let time = '2019-3-30 12:00:00'
    let time = {
      n: 2019,
      y: 3,
      r: 30,
      s: 12,
      f: 59,
      m: 55
    }
    let times = time.n + '-' + time.y + '-' + time.r + ' ' + time.s + ':' + time.f + ':' + time.m
    time.m = time.m < 10 ? '0' + time.m : time.m
    time.f = time.f < 10 ? '0' + time.f : time.f
    time.s = time.s < 10 ? '0' + time.s : time.s
    time.r = time.r < 10 ? '0' + time.r : time.r
    time.y = time.y < 10 ? '0' + time.y : time.y
    console.log(times);
    var newDate = new Date(times)
    function clock() {
      var elemtCan = document.getElementById('canvasWaord');
      console.log(elemtPs)
      // console.log(elemtCan)
      //确定浏览器支持 canvas 元素
      var drawElent = elemtCan.getContext('2d')
      var x = 200, y = 200; //指定坐标
      var r = 150; //指定钟表半径
      //开始绘制  绘制的是 60个外面的小刻度
      drawElent.beginPath();
      for (var i = 0; i <= 60; i++) {
        drawElent.moveTo(x, y);
        // 角度 * Π / 180 = 弧度  360/60=6 因为循环的是60
        drawElent.arc(x, y, r, 6 * i * Math.PI / 180, 6 * (i + 1) * Math.PI / 180)

      }
      drawElent.stroke(); // 绘制

      // 绘制的是覆盖 的是里面细长的刻度线 
      drawElent.beginPath();
      drawElent.fillStyle = 'white'
      // r * 0.9 出现标准长度线
      drawElent.arc(x, y, r * 0.9, 0, 2 * Math.PI)
      //填充
      drawElent.fill()
      // var newDate = new Date('2019-3-30 12:00:00')
      // var tYearto = newDate.getFullYear()
      // var tMonthto = newDate.getMonth() + 1
      // var tDayto = newDate.getDate();    
      var tHousto = newDate.getHours();
      var tMindto = newDate.getMinutes();
      var tSento = newDate.getSeconds()
      // tSento++
      time.m++
      times = time.n + '-' + time.y + '-' + time.r + ' ' + time.s + ':' + time.f + ':' + time.m
      newDate = new Date(times)
      switch (true) {
        //秒
        case time.m >= 59:
          time.m = 0
          time.f += 1;
          break;
        //分
        case time.f >= 59:
          time.f = 0
          time.s += 1;
          break;
        //时
        case time.s >= 59:
          time.s = 0
          time.r += 1;
          break;
        //日
        case time.r >= 59:
          time.r = 0
          time.y += 1;
          break;
        //月
        case time.y >= 59:
          time.y = 0
          time.n += 1;
          break;
      }
      console.log(tSento);
      // var time = new Date()
      // var tHous = time.getHours();
      // var tMind = time.getMinutes();
      // var tSent = time.getSeconds()
      //  -90 ：PI的半径    tHous / 30 ：12个小时 所以360/12
      var thousValue = (-90 + tHousto * 30 + tMindto / 2) * Math.PI / 180;
      // -90 ：PI的半径    tMind * 6 ： 360/60
      var tmindValue = (-90 + tMindto * 6) * Math.PI / 180;
      // -90 ：PI的半径   tSent * 6：360/60
      var tsentValue = (-90 + tSento * 6) * Math.PI / 180;
      //绘制 12小时的颜色加深的刻度线
      drawElent.lineWidth = 3;
      drawElent.beginPath();
      for (i = 0; i <= 12; i++) {
        drawElent.moveTo(x, y);
        // 角度 * Π / 180 = 弧度
        drawElent.arc(x, y, r, 30 * i * Math.PI / 180, 30 * (i + 1) * Math.PI / 180)
      }
      drawElent.stroke(); // 绘制

      //绘制的是覆盖的是颜色加深的刻度线
      drawElent.beginPath();
      drawElent.fillStyle = 'white'
      // r * 0.9 出现标准长度线
      drawElent.arc(x, y, r * 0.9, 0, 2 * Math.PI)
      //填充
      drawElent.fill()

      //绘制时钟的时针
      drawElent.lineWidth = 5;
      drawElent.beginPath();
      drawElent.moveTo(x, y)
      drawElent.arc(x, y, r * 10 / 20, thousValue, thousValue, false)
      drawElent.stroke();

      //绘制钟表的分针
      drawElent.lineWidth = 3;
      drawElent.beginPath();
      drawElent.moveTo(x, y)
      drawElent.arc(x, y, r * 15 / 20, tmindValue, tmindValue, false)
      drawElent.stroke();

      //绘制钟表的秒针
      drawElent.lineWidth = 1;
      drawElent.beginPath();
      drawElent.moveTo(x, y)
      drawElent.arc(x, y, r * 20 / 20, tsentValue, tsentValue, false)
      drawElent.stroke();
      elemtPs.innerText = times
      // elemtPs.innerText = tYearto + ' : ' + tMonthto + ' : ' + tDayto + ' : ' + tHousto + ' : ' + tMindto + ' : ' + tSento
    }
    setInterval(clock, 1000);
    clock()
  }

</script>

</html>